<template>
  <div>
    <Layout>
      <Top class="top" />
      <Tabs
        class-prefix="type"
        :data-source="recordTypeList"
        :value.sync="type"
      />

      <ol v-if="groupList.length > 0">
        <li v-for="(group, index) in groupList" :key="index">
          <h3 class="title">
            {{ beautify(group.title) }}
            <span>￥{{ group.total }}</span>
          </h3>
          <ol>
            <li class="record" v-for="item in group.items" :key="item.id">
              <span> {{ tagString(item.tags) }}</span>
              <span class="notes">{{ item.notes }}</span>
              <span class="amount"> {{ item.type }}￥{{ item.amount }}</span>
            </li>
          </ol>
        </li>
      </ol>
      <div v-else class="noResult">
        <span> 目前没有相关记录 </span>
        <img src="@/assets/icons/noResult.png" alt="" />
      </div>
    </Layout>
  </div>
</template>

<script lang="ts">
import Top from "../components/Top.vue";
import Tabs from "../components/Tabs.vue";
import Vue from "vue";
import { Component } from "vue-property-decorator";
import intervalList from "../constants/intervalList";
import recordTypeList from "../constants/recordTypeList";
import dayjs from "dayjs";
import clone from "../lib/clone";
@Component({
  components: { Top, Tabs },
})
export default class Statistics extends Vue {
  beautify(string: string) {
    const day = dayjs(string);
    const now = dayjs();
    if (day.isSame(now, "day")) {
      return "今天";
    } else if (day.isSame(now.subtract(1, "day"), "day")) {
      return "昨天";
    } else if (day.isSame(now.subtract(2, "day"), "day")) {
      return "前天";
    } else if (day.isSame(now, "year")) {
      return day.format("M月DD日");
    } else {
      return day.format("YYYY年M月DD日");
    }
  }

  tagString(tags: Tag[]) {
    return tags.length === 0 ? "无" : tags.map((t) => t.name).join("，");
  }
  get recordList() {
    return (this.$store.state as RootState).recordList;
  }
  get groupList() {
    const { recordList } = this;

    const newList = clone(recordList)
      .filter((r) => r.type == this.type)
      .sort(
        (a, b) => dayjs(b.createdAt).valueOf() - dayjs(a.createdAt).valueOf()
      );
    if (newList.length === 0) {
      return [];
    }

    type Result = { title: string; total?: number; items: RecordItem[] }[];
    const result: Result = [
      {
        title: dayjs(newList[0].createdAt).format("YYYY-MM-DD"),
        items: [newList[0]],
      },
    ];
    for (let i = 1; i < newList.length; i++) {
      const current = newList[i];
      const last = result[result.length - 1];
      if (dayjs(last.title).isSame(dayjs(current.createdAt), "day")) {
        last.items.push(current);
      } else {
        result.push({
          title: dayjs(current.createdAt).format("YYYY-MM-DD"),
          items: [current],
        });
      }
    }
    result.map((group) => {
      group.total = group.items.reduce((sum, item) => (sum += item.amount), 0);
    });
    return result;
  }
  beforeCreate() {
    this.$store.commit("fetchRecords");
  }

  type = "-";
  interval = "day";
  intervalList = intervalList;
  recordTypeList = recordTypeList;
}
</script>

<style lang="scss" scoped>
.noResult {
  > span {
    padding: 16px;
    text-align: center;
    color: #8acba7;
    display: block;
  }
  > img {
    height: 320px;
  }
}
::v-deep {
  .type-tabs-item {
    border-radius: 40px;
    background: #c0dcc3;

    &.selected {
      background: white;
      font-weight: 800;
      &::after {
        display: none;
      }
    }
  }

  .interval-tabs-item {
    height: 48px;
    line-height: 48px;
  }
}
%item {
  padding: 8px 16px;
  line-height: 24px;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.title {
  border-top: 1px solid rgb(233, 232, 232);
  @extend %item;
  font-size: 16px;

  background: #c0dcc3;
}
.record {
  @extend %item;
  background: white;
}
.notes {
  margin-right: auto;
  margin-left: 16px;
  color: #999;
}
.amount {
  margin-left: 60px;
}
</style>